<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>交易-合约</title>
    <link rel="stylesheet" href="./assets/css/mui.min.css">
    <!-- 自定义的公共样式表 -->
    <link rel="stylesheet" href="./assets/css/lib.common.css">
    <link rel="stylesheet" href="./assets/css/animate3.1.5.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="./assets/css/app.css">
    <script src="./assets/js/mui.min.js"></script>
    <!-- 点击复制文本 -->
    <script src="./assets/js/clipboard.min.js"></script>
    <!-- 自定义的js脚本 -->
    <script src="./assets/js/lib.common.js"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    [endif]-->
</head>
<body>

<!-- 币种选择start -->
<div class="lib-aside shadow2 animated" style="width: 80%;">
    <div class="mui-row">
        <i class="mui-icon mui-icon-back f_r text-danger p_x5 line30" onclick="closeSide()"></i>
        <div class="mui-col-xs-12 mui-col-sm-12 p_t15">
            <div class="mui-slider">
                <div class="mui-scroll-wrapper mui-segmented-control mui-segmented-control-inverted">
                    <a class="mui-control-item mui-active" href="#item1">
                        USDT
                    </a>
                    <a class="mui-control-item" href="#item2">
                        BTC
                    </a>
                    <a class="mui-control-item" href="#item3">
                        ETH
                    </a>
                </div>

                <div class="mui-slider-group p_y10">

                    <!--USDT-->
                    <div id="item1" class="mui-slider-item mui-control-content mui-active">
                        <div class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                <!--<p class="no-data">暂无数据</p>-->
                                <table class="table ">
                                    <tr>
                                        <td class="text-center p_t10 bold">BTC/USDT</td>
                                        <td class="text-center p_t10 font12">10171.00</td>
                                        <td class="text-center">
                                            <button type="button" class="mui-btn btn-green">+2.94%</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center p_t10 bold">BTC/USDT</td>
                                        <td class="text-center p_t10 font12">10171.00</td>
                                        <td class="text-center">
                                            <button type="button" class="mui-btn mui-btn-danger">-2.94%</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center p_t10 bold">BTC/USDT</td>
                                        <td class="text-center p_t10 font12">10171.00</td>
                                        <td class="text-center">
                                            <button type="button" class="mui-btn btn-green">+2.94%</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!--BTC-->
                    <div id="item2" class="mui-slider-item mui-control-content">
                        <div class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                <p class="no-data">暂无数据</p>
                            </div>
                        </div>
                    </div>


                    <!--ETH-->
                    <div id="item3" class="mui-slider-item mui-control-content">
                        <div class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                <!--<p class="no-data">暂无数据</p>-->
                                <table class="table ">
                                    <tr>
                                        <td class="text-center p_t10 bold">BTC/USDT</td>
                                        <td class="text-center p_t10 font12">10171.00</td>
                                        <td class="text-center">
                                            <button type="button" class="mui-btn mui-btn-danger">-2.94%</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- 币种选择end -->


<!-- 底部导航条start -->
<nav class="mui-bar mui-bar-tab">
    <a url="./首页.html" class="mui-tab-item">
        <div class="p_y2">
            <!--<img src="./assets/image/hdpi-v4/icon_home_checked.png">-->
            <img src="./assets/image/hdpi-v4/icon_home_uncheck.png">
        </div>
        <div class="mui-tab-label">首页</div>
    </a>
    <a url="./行情.html" class="mui-tab-item">
        <div class="p_y2">
            <!--<img src="./assets/image/hdpi-v4/icon_market_checked.png">-->
            <img src="./assets/image/hdpi-v4/icon_market_uncheck.png">
        </div>
        <div class="mui-tab-label">行情</div>
    </a>
    <a class="mui-tab-item mui-active">
        <div class="p_y2">
            <img src="./assets/image/hdpi-v4/icon_deal_checked.png">
            <!--<img src="./assets/image/hdpi-v4/icon_deal_uncheck.png">-->
        </div>
        <div class="mui-tab-label">交易</div>
    </a>
    <a url="./个人中心.html" class="mui-tab-item">
        <div class="p_y2">
            <!--<img src="./assets/image/hdpi-v4/icon_mine_checked.png">-->
            <img src="./assets/image/hdpi-v4/icon_mine_uncheck.png">
        </div>
        <div class="mui-tab-label">个人</div>
    </a>
</nav>
<!-- 底部导航条start -->

<!-- 头部start -->
<div class="mui-row bg-blue jiaoyi-head">
    <div class="mui-col-xs-12 mui-col-sm-12">
        <header class="mui-bar-nav jiaoyi-head-bar p_y15">
            <h1 class="mui-title bold">
                <div class="mui-scroll-wrapper mui-segmented-control mui-segmented-control-inverted">
                    <a class="mui-control-item" url="./交易-币币.html">
                        币币
                    </a>
                    <a class="mui-control-item mui-active" href="#">
                        合约
                    </a>
                </div>
            </h1>
        </header>
    </div>
    <div class="mui-col-xs-12 mui-col-sm-12 jiaoyi-head-toolbar bg-white p_t10 p_x10">
        <span class="line35">
            <i class="mui-icon mui-icon-bars font20" onclick="openSide()"></i>
            <span class="bold black">WAP/USDT</span>
        </span>
        <a url="./Echarts_K线图.html" class="line40 f_r p_t5">
            <i class="mui-icon mui-icon-settings font20"></i>
        </a>
    </div>
</div>
<!-- 头部end -->

<div class="mui-row bg-white jiaoyi-content p_y10">

    <!--中部左边内容区start-->
    <div class="mui-col-xs-6 mui-col-sm-6">
        <div class="mui-row p_x10">
            <form id="form" action="">
                <div class="mui-col-xs-12 mui-col-sm-12" id="__type">
                    <label class="jiaoyi-buy active">
                        <input name="type" type="radio" class="jiaoyi-buy-radio" checked>
                        做多
                    </label>
                    <label class="jiaoyi-sell">
                        <input name="type" type="radio" class="jiaoyi-sell-radio">
                        做空
                    </label>
                </div>
                <div class="mui-col-xs-12 mui-col-sm-12 p_t10">
                    <div class="mui-input-row mui-select font14 black">
                        <select id="price_type" name="price_type"
                                style="border: solid 1px #ccc !important;padding-left:5px !important;">
                            <option value="0">不限</option>
                            <option value="0">限价</option>
                            <option value="200">市价</option>
                        </select>
                    </div>
                    <div class="mui-input-row font14 p_y5 dark">
                        单价：
                    </div>
                    <div data-numbox-step="0.1" data-numbox-min="0" class="mui-input-row mui-numbox font14 black w100">
                        <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                        <input id="price" name="amount" class="mui-numbox-input" type="number" value="0"
                               placeholder="单价">
                        <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                    </div>
                    <div class="mui-input-row font14 p_y5 dark">
                        倍数：
                    </div>
                    <div class="mui-input-row mui-select font14 black">
                        <select id="multiple" name="multiple"
                                style="border: solid 1px #ccc !important;padding-left:5px !important;">
                            <option value="100">100</option>
                            <option value="50">50</option>
                            <option value="20">20</option>
                        </select>
                    </div>

                    <div class="mui-input-row font12 p_y5 dark">
                        手数（1手等于100ETH）：
                    </div>
                    <div class="mui-input-row mui-select font14 black">
                        <select id="hand" data-eth="100" name="hand"
                                style="border: solid 1px #ccc !important;padding-left:5px !important;">
                            <option value="100">100</option>
                            <option value="50">50</option>
                            <option value="20">20</option>
                        </select>
                    </div>

                    <div class="mui-input-row font14 line20 dark">
                        <div>合约市值<span class="f_r text-warning" id="market_value">111.00</span></div>
                        <div>保证金<span class="f_r text-warning" id="bond">100.00</span></div>
                        <div>服务费<span class="f_r text-warning" id="fee">0.01</span></div>
                    </div>
                </div>
                <div class="mui-col-xs-12 mui-col-sm-12 p_t10">
                    <p class="black">可用<span class="f_r text-warning">0USDT</span></p>
                </div>
                <div class="mui-col-xs-12 mui-col-sm-12 p_t10">
                    <button type="submit" id="buy-submit" onclick="__submit('#form')" class="mui-btn w100 btn-green">
                        做多
                    </button>
                    <button type="submit" id="sell-submit" onclick="__submit('#form')"
                            class="mui-btn w100 mui-btn-danger" style="display: none">做空
                    </button>
                </div>
            </form>
        </div>

    </div>
    <!--中部左边内容区end-->

    <!-- 中部右边表格start -->
    <div class="mui-col-xs-6 mui-col-sm-6">
        <table class="table table-responsive">
            <thead>
            <tr>
                <th class="text-center normal font12 dark" width="50%">价格</th>
                <th class="text-center normal font12 dark" width="50%">数量</th>
            </tr>
            </thead>

            <tr>
                <td class="text-center font14 text-warning">2.080</td>
                <td class="text-center font14 black">128496.11</td>
            </tr>
            <tr>
                <td class="text-center font14 text-warning">2.080</td>
                <td class="text-center font14 black">128496.11</td>
            </tr>
            <!-- 分割线 -->
            <tr>
                <td class="text-center font14 text-green">2.080</td>
                <td class="text-center font14 black"></td>
            </tr>
            <tr>
                <td class="text-center font14 text-green">2.080</td>
                <td class="text-center font14 black">128496.11</td>
            </tr>
            <tr>
                <td class="text-center font14 text-green">2.080</td>
                <td class="text-center font14 black">128496.11</td>
            </tr>

        </table>
    </div>
    <!-- 中部右边表格start -->
</div>

<div class="app-footer">
    <!-- 防止底部导航挡住内容的区块（勿删） -->
</div>
</body>

</html>
<script>
    // 操作类型变化
    mui(document).on('change', "input[name='type']", function (e) {
        Array.prototype.forEach.call(document.querySelectorAll('#__type label.active'), function (item) {
            item.classList.remove('active');
        })
        const isBuy = e.target.getAttribute('class').indexOf('jiaoyi-buy') > -1;
        let buyS = document.querySelector('#buy-submit');
        let sellS = document.querySelector('#sell-submit');
        if (isBuy) { //用户选择了买入
            document.querySelector('.jiaoyi-buy').classList.add('active');
            buyS.style.display = '';
            sellS.style.display = 'none';
        } else { // 用户选择了卖出
            document.querySelector('.jiaoyi-sell').classList.add('active');
            sellS.style.display = '';
            buyS.style.display = 'none';
        }

    });

    // 市价限价选择
    mui(document).on('change', '#price_type', function (e) {
        const price = e.target.value;
        if (price && price > 0) {
            document.getElementById('price').value = price;
            setValue();
        }
    });

    // 单价、倍数、手数发生变化
    mui(document).on('change', '#price,#multiple,#hand', function (e) {
        setValue();
    });

    /**
     * 设置市值等
     * @returns {void}
     */
    function setValue() {
        // 单价
        const price = document.getElementById('price').value;
        // 倍数
        const multiple = document.getElementById('multiple').value;
        const handDom = document.getElementById('hand');
        // 手数
        const hand = handDom.value;
        // 一手价值的eth
        const handEth = handDom.getAttribute('data-eth');
        console.log(price, multiple, hand, handEth);
        // 设置市值
        document.getElementById('market_value').innerText = '0.00';
        // 设置保证金
        document.getElementById('bond').innerText = '0.00';
        // 设置服务费
        document.getElementById('fee').innerText = '0.00';
    }


</script>